<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1>v-for</h1>
        <!-- {{characters[0]}}
      {{characters[1]}}
      {{characters[2]}} -->
        <ul>
            <li v-for="character in characters">{{character}}</li>
        </ul>
        <ul>
            <li v-for="(user,index) in users">{{index}}--{{user.name}}--{{user.age}}</li>
        </ul>
        <!-- <div v-for="(user,index) in users">
            {{index}}--{{user.name}}--{{user.age}}
        </div> -->
        <!-- <template v-for="(user,index) in users">
            <h3>{{index}}.{{user.name}}</h3>
            <p>Age--{{user.age}}</p>
        </template> -->
        <template v-for="(user,index) in users">
            <div v-for="(val,key) in user">
                <p>{{key}}--{{val}}</p>
            </div>
        </template>
    </div>
    <script src="app8.js"></script>
</body>

</html>